<template>
  <x-main>
    <view class="x-full-container x-store">
      <x-empty :show="$emptyArray(records)"></x-empty>
      <view @click="onModify(item)" class="body" v-for="(item, index) in records">
        <view class="x-space-between x-small-bottom">
          <view class="name">{{item.name}}</view>
          <view v-if="item.status == 1" class="enabled">启用</view>
          <view v-if="item.status == 0" class="disabled">禁用</view>
        </view>
        <view class="value x-small-bottom">账号角色：{{formatRole(item.roleList)}}</view>
        <view class="value x-small-bottom">所属门店：{{item.storeNames}}</view>
        <!--      <view class="x-row">-->
        <!--        <view class="value x-small-right">门店账号数：3</view>-->
        <!--        <view class="value">售后电话：15959234092</view>-->
        <!--      </view>-->
      </view>
    </view>
  </x-main>
  <x-bottom>
    <view @click="onAdd" class="x-btn x-btn-primary">添加成员</view>
  </x-bottom>
</template>

<script setup>
import staff from '@/stores/modules/staff';
import {storeToRefs} from "pinia";
import {onLoad, onReachBottom, onShow} from "@dcloudio/uni-app";
import {Helper} from "core";
const Store  = staff();
const {records, pageNo, pageSize} = storeToRefs(Store);

onShow(async () => {
  await Store.getList(1, pageSize.value);
})

onReachBottom(() => {
  Store.getList(pageNo.value + 1, pageSize.value);
})

const formatRole = (roleList) => {
  if(Helper.emptyArray(roleList)) {
    return "";
  }

  return roleList.map(x => {return x.roleName}).join(",");
}

const onAdd = () => {
  uni.navigateTo({url: "/pages/mine/staff/form"});
}

const onModify = (item) => {
  uni.navigateTo({url: "/pages/mine/staff/form?id=" + item.userId});
}
</script>

<style scoped lang="less">
.x-store {
  .body {
    background-color: #ffffff;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    .name {
      font-size: 32rpx;
      font-weight: bold;
    }

    .value {
      font-size: 24rpx;
      color: #999999;
    }

    .enabled {
      color: @success;
      background-color: #f2f2f2;
      font-size: 24rpx;
      width: 100rpx;
      height: 44rpx;
      box-sizing: border-box;
      text-align: center;
      line-height: 44rpx;
    }

    .disabled {
      font-size: 24rpx;
      color: @danger;
      background-color: #f2f2f2;
      width: 100rpx;
      height: 44rpx;
      box-sizing: border-box;
      text-align: center;
      line-height: 44rpx;
    }
  }
}
</style>
